import {
  reqExamples,
  reqExampleSwiperPicturesTabs
} from '../../utils/api.js'

import {
  getReqData
} from '../../utils/util.js'

var sliderWidth = 96; // 需要设置slider的宽度，用于计算中间位置
const {
  listCount,
  BASE_IMG_URL
} = getApp().globalData

Page({
  data: {
    tabs: ["推荐", "办公楼宇", "商业展示"],
    activeIndex: 0,
    sliderOffset: 0,
    sliderLeft: 0,
    swiper_imgs: [],
    arr: [],
    BASE_IMG_URL,
    listCount,
    loading: true,
    hideSwiper: false,
    hideNavbar: false,
    hideContent: false,
  },
  progressiveLoad() {
    setTimeout(() => {
      this.setData({
        hideNavbar: true
      })
    }, 1000)
  },
  onLoad: function () {
    wx.showLoading({
      title: '请稍后...',
    })

    this.progressiveLoad()

    var that = this;
    wx.getSystemInfo({
      success: function (res) {
        that.setData({
          sliderLeft: (res.windowWidth / that.data.tabs.length - sliderWidth) / 2,
          sliderOffset: res.windowWidth / that.data.tabs.length * that.data.activeIndex
        });
      }
    });

    this.init();
  },
  init: async function () {
    // 设置轮播图和tabs
    const {
      result: dataSwiperPictures
    } = await reqExampleSwiperPicturesTabs()
    const {
      dataTabs,
      imgs
    } = getReqData(dataSwiperPictures)
    let {
      arr
    } = this.data

    // 根据dataTabs的数量，初始化arr
    for (let i = 0; i < dataTabs.length; i++) {
      arr[i] = new Array()
    }

    this.data.arr = arr
    this.data.tabs = dataTabs.map(e => e.name)
    this.data.swiper_imgs = imgs

    this.setData({
      hideSwiper: true
    })

    await this.tabShow()
  },
  /**
   * 总的展示用函数
   * arr的结构是：
   * arr[0]=[] “推荐”的数据
   * arr[1]=[] “办公楼宇”的数据
   * ...
   * 
   * 如果当前activeIndex对应的数组的length>=listCount，那么点击tabs就不会再请求新的数据了。
   */
  tabShow: async function (id = 0) {
    let {
      arr,
      tabs,
      swiper_imgs
    } = this.data

    const activeIndex = id // 被点击的tab的下标。如果没有e，表示是第一个“推荐”
    const length = arr[activeIndex].length
    const cName = tabs[activeIndex] // tab所代表的分类名

    // 如果当前tab中的数据存在，并且数量大于等于 listCount，那么就不需要请求数据。只有滑动到底部才请求。
    if (length >= listCount) return

    // 如果是正常的arr[activeIndex]已经有数据，那么就直接请求。
    let {
      result
    } = await reqExamples({ // 请求需要的数据
      listCount, // 这个listCount是全局变量，表示一次获取的数据数量。
      skipCount: length, // 要跳过的数量
      cName
    })

    const data = getReqData(result)

    // 如果下面已经没有数据了，就返回
    if (!data || data.length <= 0) return null;

    arr[activeIndex] = data

    this.setData({
      arr,
      tabs,
      swiper_imgs,
      activeIndex,
      loading: false,
      hideContent: true
    })

    wx.hideLoading()
  },
  tabClick: function (e) {
    const {
      offsetLeft,
      id
    } = e.currentTarget

    const {
      activeIndex
    } = this.data
    if (id * 1 === activeIndex) return

    this.setData({
      sliderOffset: offsetLeft,
      activeIndex: id * 1
    });

    this.tabShow(id * 1)
  },
  /**
   * 点击文章
   */
  articleClick: function (e) {
    // 这个参数是在 data-index 中设置的
    const {
      index
    } = e.currentTarget.dataset
    const {
      activeIndex
    } = this.data
    // console.log('articleClick', index)
    let newInfo = this.data.arr[activeIndex][index]

    // 进入文章内部。使用 detail_examples 模板
    const barName = '内容详情'
    newInfo.barName = barName

    // 设置图片的url
    newInfo.imgs = newInfo.imgs.map(img => BASE_IMG_URL + img)

    // 设置时间
    newInfo.time = newInfo.lastTime

    wx.navigateTo({
      url: '/pages/detail_examples/detail_examples',
      success: function (res) {
        // 通过eventChannel向被打开页面传送数据
        res.eventChannel.emit('acceptDataFromIndexPage', {
          ...newInfo
        })
      }
    })
  },
  /**
   * 点赞
   * 这个只能在文章内部点赞，外部点赞不了。
   */
  likesClick: function (e) {
    console.log('likesClick', e)
  },
  /**
   * 点击轮播图中的图片
   */
  onMySwiperEvent: function (e) {
    console.log('点击轮播图中的图片', e)
    const {
      index
    } = e.detail

    wx.navigateTo({
      url: '/pages/detail_one/detail_one?index=' + index,
    })
  },
  /**
   * 下拉到最低，再获取数据。
   */
  onLower: async function (e) {
    wx.showLoading({
      title: '请稍后...',
    })

    let {
      activeIndex,
      arr,
      tabs
    } = this.data
    const skipCount = arr[activeIndex].length
    const cName = tabs[activeIndex]
    const {
      result
    } = await reqExamples({
      listCount,
      skipCount,
      cName
    })
    const temp = getReqData(result)

    if (!temp || temp.length <= 0) {
      setTimeout(() => {
        wx.hideLoading()
      }, 1000)
      return null
    };

    arr[activeIndex] = arr[activeIndex].concat(temp)

    this.setData({
      arr
    })

    setTimeout(() => {
      wx.hideLoading()
    }, 1000)
  }
});